<template>
  <div class="box">
    <div><MyTop :name="name" :dec="dec"></MyTop></div>
    <div class="one">
      <el-row>
        <el-col :span="4">
          <div class="menu">
            <p
              v-for="item in menuData"
              :key="item.id"
              @click="changeView(item)"
              :class="activeId == item.id ? 'item line' : 'item line-opa'"
            >
              {{ item.menuName }}
            </p>
          </div>
        </el-col>
        <el-col :span="19">
          <router-view></router-view>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MyTop from "../components/MyTop.vue";
export default {
  components: {
    MyTop,
  },
  data() {
    return {
      menuData: [
        {
          id: 1,
          menuName: "个人信息",
          path: "/main/accset/myinfo",
        },
        {
          id: 2,
          menuName: "账户信息",
          path: "/main/accset/accinfo",
        },
        {
          id: 3,
          menuName: "隐私设置",
          path: "/main/accset/priinfo",
        },
      ],
      activeId: 1,
      name:'账户设置',
      dec:"设置账户基本信息"
    };
  },
  methods: {
    changeView(obj) {
      this.$router.push(obj.path);
      this.activeId = obj.id;
    },
  },
};
</script>

<style lang="less">
.box {
  background-color: #f2f7fb;
  overflow: hidden;
  .one {
    width: 1200px;
    margin: 40px auto;
    .menu {
      user-select: none;
      .item {
        display: block;
        height: 20px;
        width: 100px;
        margin: 15px 0;
        padding: 5px 0;
      }
      .line {
        border-left: 3px #312a6d solid;
      }
      .line-opa {
        border-left: 3px #312a6d00 solid;
      }
    }
  }
}
</style>